<template>
  <div class="container">
    <div style="text-align:center;">
      <h3>课程信息修改</h3>
    </div>
    <hr />
    <table>
      <tr>
        <td style="width: 200px;" align="right">
          <span>课程编号：</span>
        </td>
        <td style="width: 600px;">{{ tableData.course.id }}</td>
      </tr>
      <tr>
        <td align="right">
          <span>课程名称：</span>
        </td>
        <td>
          <el-button
            type="text"
            @click="openCourseList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.course.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>开课学院：</span>
        </td>
        <td>
          <el-button
            type="text"
            @click="openInstituteList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.institute.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>教学班级：</span>
        </td>
        <td>
          <el-button
            type="text"
            @click="openInstructionClassList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.class.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>授课教师：</span>
        </td>
        <td>
          <el-button
            type="text"
            @click="openTeacherList = true"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <span>{{ tableData.teacher.name }}</span>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>排课人数：</span>
        </td>
        <td>
          <el-input style="width: 100px" v-model="tableData.arrangeNumber"></el-input>
          <span>上课人数：</span>
          <el-input style="width: 100px" v-model="tableData.attendanceNumber"></el-input>
          <span>课时：</span>
          <el-input type="text" style="width:100px;" v-model="tableData.classPeriod"></el-input>
        </td>
      </tr>
      <!-- 上课时间地点 -->
      <tr v-for="(item,index) in tableData.timePlace" :key="'timePlace'+index">
        <td colspan="2" style="text-align:ceneter;">
          <el-button
            type="text"
            @click="openTimePlace(item)"
            style="width:100%;height:100%;font-size:18px;text-align:left;"
          >
            <div>
              <span
                style="display:inline-block;color: rgb(7, 7, 7);width:150px;height:40px;text-align:right;"
              >上课星期：</span>
              <span style="width:600px;">{{ item.week }}</span>
            </div>
            <div>
              <span
                style="display:inline-block;color: rgb(7, 7, 7);width:150px;height:40px;text-align:right;"
              >授课地点：</span>
              <span>{{item.place}}</span>
            </div>
            <div>
              <span
                style="display:inline-block;color: rgb(7, 7, 7);width:150px;height:40px;text-align:right;"
              >上课节次：</span>
              <span
                v-for="(section,index) in item.sectionTime"
                :key="'section'+index"
              >{{section.sectionTime}}、</span>
            </div>
            <div>
              <span
                style="display:inline-block;color: rgb(7, 7, 7);width:150px;height:40px;line-height:40px;text-align:right;"
              >上课内容描述：</span>
              <span>{{item.sectionDescription}}</span>
            </div>
          </el-button>
        </td>
      </tr>
      <!-- 添加上课的时间地点 -->
      <tr>
        <td colspan="2" style="text-align:center;">
          <el-button @click="openTimePlaceAdd=true" style="width:100%;">
            <i class="el-icon-plus">添加上课的时间地点</i>
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>课程描述：</span>
        </td>
        <td>
          <el-input type="textarea" size="medium" v-model="tableData.description"></el-input>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <el-button type="primary" @click="update">确认</el-button>
          <el-button type="primary" @click="reset">还原</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </td>
      </tr>
    </table>

    <!-- 课程筛选 -->
    <el-dialog title="选择课程" :visible.sync="openCourseList">
      <el-input placeholder="请输入关键字" v-model="courseKeyword">
        <template slot="prepend">课程名</template>
        <el-button slot="append" icon="el-icon-search" @click="getCourseByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="courseSelect">
        <el-radio
          v-for="(course, index) in courseList"
          :key="'course1' + index"
          :label="course"
        >{{ course.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="courseSelect = '',courseInit()">清 空</el-button>
        <el-button type="primary" @click="courseSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 班级筛选 -->
    <el-dialog title="选择班级" :visible.sync="openInstructionClassList">
      <el-input placeholder="请输入关键字" v-model="instructionClassKeyword">
        <template slot="prepend">班级名</template>
        <el-button slot="append" icon="el-icon-search" @click="getClassByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="instructionClassSelect">
        <el-radio
          v-for="(instructionClass, index) in instructionClassList"
          :key="'instructionClass' + index"
          :label="instructionClass"
        >{{ instructionClass.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="instructionClassSelect = '',classInit()">清 空</el-button>
        <el-button type="primary" @click="instructionClassSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 开设学院筛选 -->
    <el-dialog title="选择学院" :visible.sync="openInstituteList">
      <el-input placeholder="请输入关键字" v-model="instituteKeyword">
        <template slot="prepend">学院名</template>
        <el-button slot="append" icon="el-icon-search" @click="getInstituteByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="instituteSelect">
        <el-radio
          v-for="(institute, index) in instituteList"
          :key="'institute' + index"
          :label="institute"
        >{{ institute.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="instituteSelect = '',instituteInit()">清 空</el-button>
        <el-button type="primary" @click="instituteSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 上课时间地点筛选 -->
    <el-dialog title="选择上课时间地点" :visible.sync="openTimePlaceList">
      <!-- 上课星期 -->
      <h3>请选择上课星期：</h3>
      <br />
      <br />
      <el-radio-group v-model="timePlaceSelect.weekSelect">
        <el-radio
          v-for="(week, index) in weekList"
          :key="'week' + index"
          :label="week.week"
        >{{ week.week }}</el-radio>
      </el-radio-group>
      <br />
      <br />
      <!-- 上课节次 -->
      <h3>请选择上课节次：</h3>
      <br />
      <br />
      <el-checkbox-group v-model="timePlaceSelect.sectionTimeSelect">
        <el-checkbox
          v-for="(sectionTime, index) in sectionTimeList"
          :key="'sectionTime' + index"
          :label=" sectionTime.sectionTime"
          style="margin:15px;"
        >{{ sectionTime.sectionTime }}</el-checkbox>
      </el-checkbox-group>
      <br />
      <br />
      <!-- 上课地点 -->
      <h3>请选择上课地点：</h3>
      <br />
      <br />
      <el-radio-group v-model="timePlaceSelect.placeSelect">
        <el-radio
          v-for="(place, index) in placeList"
          :key="'place' + index"
          :label="place"
        >{{ place.name }}</el-radio>
      </el-radio-group>
      <br />
      <br />
      <h3>简单描述：</h3>
      <el-input type="textarea" v-model="timePlaceSelect.description"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="timePlaceSelect.sectionTime = '',timePlaceSelect.placeSelect='',timePlaceSelect.weekSelect='',timePlaceInit()"
        >清 空</el-button>
        <el-button type="primary" @click="timePlaceSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 教师筛选 -->
    <el-dialog title="选择教师" :visible.sync="openTeacherList">
      <el-input placeholder="请输入关键字" v-model="teacherKeyword">
        <template slot="prepend">教师名</template>
        <el-button slot="append" icon="el-icon-search" @click="getTeacherByKeyword"></el-button>
      </el-input>
      <br />
      <br />
      <el-radio-group v-model="teacherSelect">
        <el-radio
          v-for="(teacher, index) in teacherList"
          :key="'teacher' + index"
          :label="teacher"
        >{{ teacher.name }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="teacherSelect = '',teacherInit()">清 空</el-button>
        <el-button type="primary" @click="teacherSelected">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加该课程的上课事件地点 -->
    <el-dialog :visible.sync="openTimePlaceAdd">
      <add @lessTimePlace="lessTimePlace" />
    </el-dialog>
  </div>
</template>

<script>
import { getAllTeacher } from "@/api/teacher";
import { getAllCourse } from "@/api/course";
import { getAllInstructionClass } from "@/api/instructionClass";
import add from "@/views/education-instructionalMatters/curriculum/components/lessonTimePlaceAdd";
export default {
  name: "curriculumUpdate",
  props: {
    courseDetails: Object, //父组件传过来的课程表详情
  },
  data() {
    return {
      openTimePlaceAdd: false, //添加上课的时间地点组件的显示

      teacherList: [], //教师列表
      teacherSelect: "", //教师选择
      openTeacherList: false, //教师筛选对话框显示
      teacherKeyword: "", //教师筛选关键字

      instructionClassList: [], //班级列表
      instructionClassSelect: "", //班级
      openInstructionClassList: false, //班级筛选对话框显示
      instructionClassKeyword: "", //班级筛选关键字

      instituteList: [], //学院列表
      instituteSelect: "", //选择的学院
      openInstituteList: false, //学院筛选对话框显示
      instituteKeyword: "", //学院筛选关键字

      courseList: [], //课程列表
      courseSelect: "", //课程选择
      openCourseList: false, //课程筛选对话框
      courseKeyword: "", //课程筛选关键字

      openTimePlaceList: false, //上课时间地点列表对话框显示
      weekList: [], //星期列表
      sectionTimeList: [], //节次列表
      placeList: [], //地点列表

      //选择时间地点
      timePlaceSelect: {
        weekSelect: "", //选择的星期
        sectionTimeSelect: "", //选择的节次
        placeSelect: "", //选择的地点
        description: "", //描述
      },

      //表格数据
      tableData: {
        semester: "", //学期
        course: "", //课程
        institute: "", //开设学院
        class: "", //上课班级
        teacher: "", //教师
        timePlace: "", //上课时间地点
        arrangeNumber: 0, //排课人数
        attendanceNumber: 0, //上课人数
        classPeriod: 0, //课时
        description: "", //课程描述
      },
    };
  },
  components: {
    add,
  },
  created() {
    //表格数据初始化
    this.init();
    //获取教师列表
    this.getAllTeacher();
    //获取课程列表
    this.getAllCourse();
    //获取班级列表
    this.getAllInstructionClass();
    //获取学院列表
    this.getAllInstitute();
    //获取星期列表
    this.getWeek();
    //获取上课节次列表
    this.getSectionTime();
    //获取上课地点
    this.getPlace();
  },
  methods: {
    //初始化数值
    init() {
      this.courseInit();
      this.semesterInit();
      this.classInit();
      this.teacherInit();
      this.instituteInit();
      this.timePlaceInit();

      this.tableData.arrangeNumber = this.courseDetails.arrangeNumber;
      this.tableData.attendanceNumber = this.courseDetails.attendanceNumber;
      this.tableData.classPeriod = this.courseDetails.classPeriod;
      this.tableData.description = this.courseDetails.description;
    },
    timePlaceInit() {
      this.tableData.timePlace = this.courseDetails.timePlace;
    },
    courseInit() {
      let id;
      let name;
      this.tableData.course = {
        id: this.courseDetails.courseId,
        name: this.courseDetails.courseName,
      };
    },
    semesterInit() {
      let id;
      let name;
      this.tableData.semester = {
        id: this.courseDetails.semesterId,
        name: this.courseDetails.semesterName,
      };
    },
    classInit() {
      let id;
      let name;
      this.tableData.class = {
        id: this.courseDetails.classId,
        name: this.courseDetails.className,
      };
    },
    teacherInit() {
      let id;
      let name;
      this.tableData.teacher = {
        id: this.courseDetails.teacherId,
        name: this.courseDetails.teacherName,
      };
    },
    instituteInit() {
      const id = "";
      const name = "";
      this.tableData.institute = {
        id: this.courseDetails.instituteId,
        name: this.courseDetails.instituteName,
      };
    },
    /**=================确定选择的数据========================================= */
    //确定选择的学院
    instituteSelected() {
      if (this.instituteSelect != "") {
        this.tableData.institute = this.instituteSelect;
      }
      this.openInstituteList = false;
    },

    //确定选择的时间地点
    timePlaceSelected() {
      if (this.timePlace != "") {
        this.tableData.timePlace = this.timePlaceSelect;
      }
      this.openTimePlaceList = false;
    },

    //确定选择的班级
    instructionClassSelected() {
      if (this.instructionClassSelect != "") {
        this.tableData.class = this.instructionClassSelect;
      }
      this.openInstructionClassList = false;
    },

    //确定选择的教师
    teacherSelected() {
      if (this.teacherSelect != "") {
        this.tableData.teacher = this.teacherSelect;
      }
      this.openTeacherList = false;
    },

    //确定选择的课程
    courseSelected() {
      if (this.courseSelect != "") {
        this.tableData.course = this.courseSelect;
      }
      this.openCourseList = false;
    },

    /**====================关键词搜索===================================== */
    //根据关键词搜索学期
    getSemesterByKeyword() {},

    //根据关键词搜索课程
    getCourseByKeyword() {},

    //根据关键词搜索班级
    getInstructionClassByKeyword() {},

    //根据关键词搜索教师
    getTeacherByKeyword() {},

    //根据关键词搜索班级
    getClassByKeyword() {},

    //根据关键词搜索学院
    getInstituteByKeyword() {},
    /**===========加载页面时的事件=========================================== */
    //获取授课班级列表
    getAllInstructionClass() {
      getAllInstructionClass().then((res) => {
        this.instructionClassList = res.data.instructionClassList;
      });
    },

    //获取教师列表
    getAllTeacher() {
      getAllTeacher().then((res) => {
        this.teacherList = res.data.teacherList;
      });
    },

    //获取课程列表
    getAllCourse() {
      getAllCourse().then((res) => {
        this.courseList = res.data.courseList;
      });
    },

    //获取学院列表
    getAllInstitute() {
      this.instituteList = [
        { id: "001", name: "计算机科学与软件学院，大数据学院" },
        { id: "002", name: "文学院" },
        { id: "003", name: "数学院" },
        { id: "004", name: "食品与安全学院" },
      ];
    },

    //获取星期列表
    getWeek() {
      this.weekList = [
        { id: "01", week: "星期一" },
        { id: "02", week: "星期二" },
        { id: "03", week: "星期三" },
        { id: "04", week: "星期四" },
        { id: "05", week: "星期五" },
        { id: "06", week: "星期六" },
        { id: "07", week: "星期日" },
      ];
    },

    //获取上课时间表
    getSectionTime() {
      this.sectionTimeList = [
        { id: "01", sectionTime: "第一节" },
        { id: "02", sectionTime: "第二节" },
        { id: "03", sectionTime: "第三节" },
        { id: "04", sectionTime: "第四节" },
        { id: "05", sectionTime: "第五节" },
        { id: "06", sectionTime: "第六节" },
        { id: "07", sectionTime: "第七节" },
        { id: "08", sectionTime: "第八节" },
        { id: "09", sectionTime: "第九节" },
        { id: "10", sectionTime: "第十节" },
        { id: "11", sectionTime: "第十一节" },
        { id: "12", sectionTime: "第十二节" },
      ];
    },

    //获取上课地点，哪个校区，哪个功能区，哪个场地，哪个房间
    getPlace() {},

    openTimePlace(val) {
      this.openTimePlaceList = true;
      this.timePlaceSelect.weekSelect = val.week;
      this.timePlaceSelect.sectionTimeSelect = val.sectionTime;
      this.timePlaceSelect.placeSelect = val.place;
      this.timePlaceSelect.description = val.sectionDescription;
    },
    /**==============按钮事件========================================= */
    //返回
    back() {
      this.$emit("closeUpdate", false);
    },

    //修改课程信息
    update() {
      this.$alert("修改课程", "修改成功", {
        confirmButtonText: "确定",
        callback: (action) => {
          //修改成功，返回页面
          this.$emit("closeUpdate", false);
        },
      });
    },

    //还原
    reset() {
      this.init();
    },
    /**============接收子组件数据============================================== */
    //添加课程的时间地点组件传回来的数据
    lessTimePlace(val, val2) {
      console.log(val2);
      this.openTimePlaceAdd = val;
      if (this.tableData.timePlace === "") {
        this.tableData.timePlace = val2;
      } else {
        this.tableData.timePlace.push(val2);
      }
    },
  },
};
</script>

<style scoped>
h3 {
  font-weight: 500;
}
p {
  float: right;
  font-weight: 300;
}
span {
  font-weight: 300;
}
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
tr {
  padding: 10px;
  height: 50px;
  line-height: 50px;
}
</style>
